import React, { useState, useEffect } from 'react';
import { Radio, Spin, Select, Button } from 'antd';

import style from '../report.css';
import IndexStyle from '@/pages/IndexPage.css';
import ColdPrice from '@/pages/global_monitor/data_board/components/ChartCardList/ColdPrice';


const { Option } = Select;

let infoList = [
    { title:'当月COP', value:27.43, unit:'' },
    { title:'当月EER', value:27.43, unit:'kw/kw'},
    { title:'当月累计冷量', value:27.43, unit:'GJ' },
    { title:'当月冷量单价', value:27.43, unit:'元/GJ' }
]

function PageItem1({ dispatch, title, companyName, energy, cost, fields, baseCost, startDate }){
    const [showType, setShowType] = useState('cost'); 

    return (
        <div className={style['page-container']} >
            <div className={style['page-title']}>
                <div className={style['page-title-content']}>{ title }</div>
                <div className={style['page-title-symbol']}></div>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', height:'90px', margin:'1rem 0' }}>
                {
                    infoList.map((item, index)=>(
                        <div key={index} style={{
                            height:'100%',
                            width:'calc( (100% - 3rem)/4 )',
                            borderRadius:'6px',
                            display:'flex',
                            flexDirection:'column',
                            justifyContent:'center',
                            paddingLeft:'1rem',
                            backgroundImage:'linear-gradient(to Right, #daedff, rgba(218, 237, 255, 0.35))',
                        }}>
                            <div style={{ color:'#000' }}>
                                <span style={{ fontSize:'2rem' }}>{ item.value }</span>
                                <span style={{ fontSize:'1rem' }}>{ item.unit }</span>
                            </div>
                            <div>{ item.title }</div>
                        </div>
                    ))
                }
            </div>
            <div style={{ height:'300px', marginBottom:'1rem', border:'1px solid #eaeaea' }}>
                <ColdPrice forReport={true} title='室外温度趋势' unit='℃' />
            </div> 
            <div style={{ height:'300px', marginBottom:'1rem', border:'1px solid #eaeaea' }}>
                <ColdPrice forReport={true} title='EER趋势' unit='kwh/GJ' />
            </div>
            <div style={{ height:'300px', marginBottom:'1rem', border:'1px solid #eaeaea' }}>
                <ColdPrice forReport={true} title='COP趋势' unit='' />
            </div>
            <div style={{ height:'280px' }}>
                
            </div>
           
        </div>
    )
}

export default PageItem1;